<template>
<!-- 招聘要求页面 -->
  <div id="RecruitmentRequirements">
    <div class="RecruitmentRequirements-wrapper">
      <div class="Header-wrapper">
            <yd-navbar title="发布信息" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="/ReleaseIinformation" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </router-link>
                  <div class="release-right" slot="right" @click="save">保存</div>
            </yd-navbar>
        </div>
        <div class="RecruitmentRequirements-from-wrapper" ref="wrapper">
          <ul class="from-box" >
             <li class="from-center">
                  <yd-cell-item>
                      <span slot="left"><i>*</i>&nbsp;兼职名称：</span>
                      <yd-input slot="right" v-model="jobname" :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false'  max="20" placeholder="请输入用户名"></yd-input>
                  </yd-cell-item>
            </li>
             <li class="from-center">
                <span slot="left" class="tleft"><i>*</i>&nbsp;兼职类型：</span>
                <popup-radio :options="jobtype1" v-model="jobtype" placeholder="请选择"></popup-radio>
            </li>
            <li class="from-center">
                <yd-cell-item>
                    <span slot="left"><i>*</i>&nbsp;招聘人数：</span>
                    <yd-input slot="right" type="number" v-model="num" :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' placeholder="请填写"></yd-input>
                </yd-cell-item>
            </li>
            <li class="from-center">
                <yd-cell-item>
                    <span slot="left"><i>*</i>&nbsp;基本工资：</span>
                    <yd-input slot="right" type="number" v-model="jobsalary" :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' placeholder="请填写"></yd-input>
                </yd-cell-item>
            </li>
             <li class="from-center">
                <span slot="left" class="tleft"><i>*</i>&nbsp;开始时间：</span>
               <group>
                <datetime v-model="starttime"></datetime >
              </group>
            </li>
              <li class="from-center">
                <span slot="left" class="tleft"><i>*</i>&nbsp;结束时间：</span>
               <group>
                <datetime v-model="endtime"></datetime >
              </group>
            </li>
            <li class="from-center">
              <span slot="left" class="tleft"><i>*</i>&nbsp;性别：</span>
              <group>
                <popup-radio :options="sexlist1" v-model="sex" placeholder="请选择"></popup-radio>
              </group>
            </li>
            <li class="from-center">
              <label class="form-title"><span>*</span>职位描述</label>
              <textarea type="text" v-model="jobdescribe" placeholder="请填写职位描述" class="text-from"></textarea>
            </li>
            <li class="from-center">
                <yd-cell-item>
                    <span slot="left"><i>*</i>&nbsp;手机号：</span>
                    <yd-input :show-success-icon='false' v-model="actorphone" slot="right"  regex="mobile" placeholder="请输入手机号码"></yd-input>
                </yd-cell-item>
            </li>
             <li class="from-center">
                <yd-cell-item>
                    <span slot="left"><i>*</i>&nbsp;邮箱：</span>
                    <yd-input :show-success-icon='false' v-model="actoremail" slot="right" :debug="true" regex="email" placeholder="请输入邮箱地址"></yd-input>
                </yd-cell-item>
            </li>
            <p class="redcolor">需要填写打*号的内容才能提交审核</p>
          </ul>
        </div>
        <div class="RecruitmentRequirements-btn">
         <div class="btn" @click="ok">提交审核</div>
        </div>
    </div>
  </div>
</template>
<script>
import {
  Datetime,
  PopupPicker,
  Group,
  Cell,
  Picker,
  XButton,
  Divider,
  XSwitch,
  PopupRadio
} from 'vux'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      sex: '',
      value1: ['请选择'],
      starttime: '请选择',
      endtime: '请选择',
      title: '性别选择',
      title2: '开始时间',
      title3: '结束时间',
      sexlist1: [
        {
          key: '0',
          value: '不限'
        },
        {
          key: '1',
          value: '男'
        },
        {
          key: '2',
          value: '女'
        }
      ],
      jobtype1: [
        {
          key: '1',
          value: '短期'
        },
        {
          key: '2',
          value: '长期'
        }
      ],
      jobname: '',
      jobtype: '',
      num: '',
      jobsalary: '',
      jobdescribe: '',
      actorphone: '',
      actoremail: ''
    }
  },
  methods: {
    save () {
      if (this.jobname === '' || this.jobname === undefined) {
        this.$dialog.toast({
          mes: '兼职名称不能为空'
        })
      } else if (this.jobtype === '' || this.jobtype === undefined) {
        this.$dialog.toast({
          mes: '兼职类型不能为空'
        })
      } else if (this.num === '') {
        this.$dialog.toast({
          mes: '人数不能为空'
        })
      } else if (this.jobsalary === '') {
        this.$dialog.toast({
          mes: '工资不能为空'
        })
      } else if (this.starttime.length < 10) {
        this.$dialog.toast({
          mes: '请选择开始时间'
        })
      } else if (this.endtime.length < 10) {
        this.$dialog.toast({
          mes: '请选择结束时间'
        })
      } else if (this.sex === '') {
        this.$dialog.toast({
          mes: '请选择性别'
        })
      } else if (this.jobdescribe === '') {
        this.$dialog.toast({
          mes: '请填写职位描述'
        })
      } else if (this.actorphone === '') {
        this.$dialog.toast({
          mes: '手机号不正确'
        })
      } else if (this.actoremail === '') {
        this.$dialog.toast({
          mes: '邮箱不正确'
        })
      } else {
        this.$axios
          .post(
            apis + '/app/jobinfoapp/add',
            this.confusion(
              JSON.stringify({
                addtype: 0 + '',
                jobname: this.jobname,
                jobtype: this.jobtype,
                num: this.num,
                jobsalary: this.jobsalary,
                starttime: this.starttime,
                endtime: this.endtime,
                sex: this.sex,
                jobdescribe: this.jobdescribe,
                actorphone: this.actorphone,
                actoremail: this.actoremail
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
            this.$dialog.toast({
              mes: '保存成功',
              callback: () => {
                this.$router.push({ path: 'ReleaseIinformation' })
              }
            })
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    },
    ok () {
      if (this.jobname === '' || this.jobname === undefined) {
        this.$dialog.toast({
          mes: '兼职名称不能为空'
        })
      } else if (this.jobtype === '' || this.jobtype === undefined) {
        this.$dialog.toast({
          mes: '兼职类型不能为空'
        })
      } else if (this.num === '') {
        this.$dialog.toast({
          mes: '人数不能为空'
        })
      } else if (this.jobsalary === '') {
        this.$dialog.toast({
          mes: '工资不能为空'
        })
      } else if (this.starttime.length < 10) {
        this.$dialog.toast({
          mes: '请选择开始时间'
        })
      } else if (this.endtime.length < 10) {
        this.$dialog.toast({
          mes: '请选择结束时间'
        })
      } else if (this.sex === '') {
        this.$dialog.toast({
          mes: '请选择性别'
        })
      } else if (this.jobdescribe === '') {
        this.$dialog.toast({
          mes: '请填写职位描述'
        })
      } else if (this.actorphone === '') {
        this.$dialog.toast({
          mes: '手机号不正确'
        })
      } else if (this.actoremail === '') {
        this.$dialog.toast({
          mes: '邮箱不正确'
        })
      } else {
        this.$axios
          .post(
            apis + '/app/jobinfoapp/add',
            this.confusion(
              JSON.stringify({
                addtype: 1 + '',
                jobname: this.jobname,
                jobtype: this.jobtype,
                num: this.num,
                jobsalary: this.jobsalary,
                starttime: this.starttime,
                endtime: this.endtime,
                sex: this.sex,
                jobdescribe: this.jobdescribe,
                actorphone: this.actorphone,
                actoremail: this.actoremail
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
            this.$dialog.toast({
              mes: '提交成功',
              callback: () => {
                this.$router.push({ path: 'ReleaseIinformation' })
              }
            })
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    }
  },
  components: {
    Datetime,
    PopupPicker,
    Group,
    Cell,
    Picker,
    XButton,
    Divider,
    XSwitch,
    PopupRadio,
    apis
  }
}
</script>
<style scoped>
.weui-cell{
border-bottom: 1px solid #f1f1f1;
}
.yd-cell-item{
width: 100%;
}
.weui-cells {
  width: 70%;
  float: left;
  text-align: right;
}
.tleft {
  width: 30%;
  float: left;
  padding-left: 16px;
  font-size: 14px;
}
.Header-wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.RecruitmentRequirements-from-wrapper {
  padding: 50px 0;
}
.RecruitmentRequirements-btn {
  position: fixed;
  bottom: 0;
  background: #f0f0f0;
  height: 50px;
  width: 100%;
}
.btn {
  width: 50%;
  height: 44px;
  margin: 3px auto;
  background: #ffd602;
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 44px;
  border-radius: 10px;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.redcolor {
  color: red;
  padding: 10px 12px;
  font-size: 12px;
  background: #fff;
}
.RecruitmentRequirements-from-wrappe {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.from-box {
  width: 100%;
  overflow: hidden;
}
.from-center {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #dfdfdf;
  padding: 0 12px;
  line-height: 52px;
  background: #fff;
}
.form-title {
  font-size: 14px;
  color: #333;
  margin-right: 5px;
  width: 30%;
}
.form-title span {
  color: red;
  margin-right: 5px;
  display: inline-block;
  width: 5px;
}
.input-from {
  text-align: right;
  float: right;
  height: 52px;
  line-height: 52px;
  width: 70%;
}
.from-selsct {
  padding: 0;
  border: none;
  outline: none;
}
.selsect-text {
  text-align: right;
  float: right;
  height: 52px;
  line-height: 52px;
  border: none;
  outline: none;
}
.text-from {
  height: 150px;
  width: 100%;
  border: none;
  text-align: left;
  padding: 0 12px;
}
.from-center {
  padding: 0;
}
.yd-cell-box {
  margin: 0;
}
.form-title {
  margin-left: 15px;
}
.vux-cell-box {
  font-size: 14px;
}
i {
  color: #ff2828;
}
</style>
